'use client';

import React, { useState } from 'react';
import { XMarkIcon } from '@heroicons/react/24/outline';

interface Order {
  id: string;
  time: string;
  pair: string;
  type: 'buy' | 'sell';
  orderType: 'limit' | 'market';
  price: number;
  amount: number;
  filled: number;
  total: number;
  status: 'active' | 'filled' | 'cancelled' | 'partial';
}

interface OrderManagementProps {
  currentSymbol: string;
}

export default function OrderManagement({ }: OrderManagementProps) {
  const [activeTab, setActiveTab] = useState<'current' | 'history' | 'trades'>('current');

  // 新平台，所有订单数据都为空
  const currentOrders: Order[] = [];
  const historyOrders: Order[] = [];
  const trades: Order[] = [];

  const getStatusColor = (status: Order['status']) => {
    switch (status) {
      case 'filled':
        return 'text-green-600 dark:text-green-400 bg-green-100 dark:bg-green-900/20';
      case 'cancelled':
        return 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700';
      case 'partial':
        return 'text-blue-600 dark:text-blue-400 bg-blue-100 dark:bg-blue-900/20';
      case 'active':
        return 'text-orange-600 dark:text-orange-400 bg-orange-100 dark:bg-orange-900/20';
      default:
        return 'text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700';
    }
  };

  const getStatusText = (status: Order['status']) => {
    switch (status) {
      case 'filled':
        return 'filled';
      case 'cancelled':
        return 'cancelled';
      case 'partial':
        return 'partial filled';
      case 'active':
        return 'active';
      default:
        return 'unknown';
    }
  };

  const handleCancelOrder = (orderId: string) => {
    // TODO: 调用取消订单API
    console.log('取消订单:', orderId);
  };

  const renderOrderTable = (orders: Order[], showActions = false) => (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead>
          <tr className="border-b border-gray-200 dark:border-gray-700">
            <th className="text-left py-3 px-4 font-medium text-gray-600 dark:text-gray-400">时间</th>
            <th className="text-left py-3 px-4 font-medium text-gray-600 dark:text-gray-400">交易对</th>
            <th className="text-left py-3 px-4 font-medium text-gray-600 dark:text-gray-400">类型</th>
            <th className="text-right py-3 px-4 font-medium text-gray-600 dark:text-gray-400">价格</th>
            <th className="text-right py-3 px-4 font-medium text-gray-600 dark:text-gray-400">数量</th>
            {activeTab === 'current' && (
              <th className="text-right py-3 px-4 font-medium text-gray-600 dark:text-gray-400">已成交</th>
            )}
            <th className="text-right py-3 px-4 font-medium text-gray-600 dark:text-gray-400">总金额</th>
            <th className="text-center py-3 px-4 font-medium text-gray-600 dark:text-gray-400">状态</th>
            {showActions && (
              <th className="text-center py-3 px-4 font-medium text-gray-600 dark:text-gray-400">操作</th>
            )}
          </tr>
        </thead>
        <tbody>
          {orders.map((order) => (
            <tr key={order.id} className="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/50">
              <td className="py-3 px-4 text-gray-600 dark:text-gray-400">{order.time}</td>
              <td className="py-3 px-4 font-medium text-gray-900 dark:text-white">{order.pair}</td>
              <td className="py-3 px-4">
                <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
                  order.type === 'buy' 
                    ? 'text-green-700 dark:text-green-300 bg-green-100 dark:bg-green-900/20' 
                    : 'text-red-700 dark:text-red-300 bg-red-100 dark:bg-red-900/20'
                }`}>
                  {order.type === 'buy' ? '买入' : '卖出'}
                </span>
              </td>
              <td className="py-3 px-4 text-right font-medium text-gray-900 dark:text-white">
                {order.orderType === 'market' ? '市价' : `$${order.price.toLocaleString()}`}
              </td>
              <td className="py-3 px-4 text-right text-gray-700 dark:text-gray-300">
                {order.amount.toFixed(6)}
              </td>
              {activeTab === 'current' && (
                <td className="py-3 px-4 text-right text-gray-700 dark:text-gray-300">
                  {order.filled.toFixed(6)}
                  <span className="text-xs text-gray-500 dark:text-gray-400 ml-1">
                    ({((order.filled / order.amount) * 100).toFixed(1)}%)
                  </span>
                </td>
              )}
              <td className="py-3 px-4 text-right font-medium text-gray-900 dark:text-white">
                ${order.total.toLocaleString()}
              </td>
              <td className="py-3 px-4 text-center">
                <span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(order.status)}`}>
                  {getStatusText(order.status)}
                </span>
              </td>
              {showActions && (
                <td className="py-3 px-4 text-center">
                  {order.status === 'active' || order.status === 'partial' ? (
                    <button
                      onClick={() => handleCancelOrder(order.id)}
                      className="inline-flex items-center justify-center w-6 h-6 text-red-600 dark:text-red-400 hover:bg-red-100 dark:hover:bg-red-900/20 rounded transition-colors"
                      title="取消订单"
                    >
                      <XMarkIcon className="w-4 h-4" />
                    </button>
                  ) : (
                    <span className="text-gray-400">-</span>
                  )}
                </td>
              )}
            </tr>
          ))}
        </tbody>
      </table>
      
      {orders.length === 0 && (
        <div className="text-center py-12 text-gray-500 dark:text-gray-400">
          <div className="mb-2">
            {activeTab === 'current' && '暂无当前委托'}
            {activeTab === 'history' && '暂无历史委托'}
            {activeTab === 'trades' && '暂无成交记录'}
          </div>
          <div className="text-sm">
            {activeTab === 'current' && '您还没有进行中的委托订单'}
            {activeTab === 'history' && '您还没有历史委托记录'}
            {activeTab === 'trades' && '您还没有任何成交记录'}
          </div>
        </div>
      )}
    </div>
  );

  return (
    <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
      {/* 选项卡 */}
      <div className="flex border-b border-gray-200 dark:border-gray-700">
        <button
          onClick={() => setActiveTab('current')}
          className={`px-6 py-3 text-sm font-medium ${
            activeTab === 'current'
              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
              : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
          }`}
        >
          当前委托
        </button>
        <button
          onClick={() => setActiveTab('history')}
          className={`px-6 py-3 text-sm font-medium ${
            activeTab === 'history'
              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
              : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
          }`}
        >
          历史委托
        </button>
        <button
          onClick={() => setActiveTab('trades')}
          className={`px-6 py-3 text-sm font-medium ${
            activeTab === 'trades'
              ? 'text-blue-600 dark:text-blue-400 border-b-2 border-blue-600 dark:border-blue-400'
              : 'text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300'
          }`}
        >
          成交记录
        </button>
      </div>

      {/* 表格内容 */}
      <div className="p-4">
        {activeTab === 'current' && renderOrderTable(currentOrders, true)}
        {activeTab === 'history' && renderOrderTable(historyOrders)}
        {activeTab === 'trades' && renderOrderTable(trades)}
      </div>

      {/* 分页 */}
      <div className="flex items-center justify-between px-4 py-3 border-t border-gray-200 dark:border-gray-700">
        <div className="text-sm text-gray-500 dark:text-gray-400">
          显示 1-{activeTab === 'current' ? currentOrders.length : 
                   activeTab === 'history' ? historyOrders.length : 
                   trades.length} 条，共 20 条
        </div>
        <div className="flex space-x-2">
          <button className="px-3 py-1 text-sm text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
            上一页
          </button>
          <button className="px-3 py-1 text-sm text-gray-500 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 rounded hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
            下一页
          </button>
        </div>
      </div>
    </div>
  );
}
